<template>
  <div class="set">
    <div class="top">
      <div class="head">
        <span @click="back">＜</span>
        <span>设置</span>
        <span style="width:20px"></span>
      </div>
      <div class="pit">
        <img src="@/assets/images/user/user-girl.png" alt />
        <p>{{names}}</p>
      </div>
      <div class="bot">
        <span>账号与安全</span>
        <span>手机绑定与更换 ></span>
      </div>
      <hr />
    </div>
    <div class="main">
      <div class="ipt">
        <span>被赞提醒</span>
        <van-switch v-model="checked" active-color="rgba(242,91,134,1)" class="btn" />
      </div>
      <div class="ipt">
        <span>影评/话题提醒</span>
        <van-switch v-model="checkedto" active-color="rgba(242,91,134,1)" class="btn" />
      </div>
      <div class="ipt">
        <span>系统通知</span>
        <van-switch v-model="checkedth" active-color="rgba(242,91,134,1)" class="btn" />
      </div>
      <div class="ipt">
        <span>优惠提醒</span>
        <van-switch v-model="checkedfo" active-color="rgba(242,91,134,1)" class="btn" />
      </div>
    </div>
    <hr />
    <div class="fot">
      <span>关于</span>
      <span>></span>
    </div>
    <van-button type="primary" class="login" @click="out" size="large">退出登录</van-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      checked: false,
      names: "",
      checkedto: true,
      checkedth: false,
      checkedfo: true
    };
  },
  computed: {},
  created() {
    var obj = JSON.parse(localStorage.getItem("user"));
    this.names = obj.pass;
  },
  mounted() {},
  methods: {
    back() {
      this.$router.go(-1);
    },
    out() {
      localStorage.clear();
      this.$router.push("/login");
    }
  }
};
</script>
<style lang="scss" >
</style>
<style scoped lang="scss">
.set {
  width: 100%;
  height: 100vh;
  background-color: rgba(35, 38, 45, 1);
  // color: white;
  color: rgba(255, 255, 255, 0.8);
  hr {
    width: 100%;
    height: 6px;
    background: rgba(51, 54, 61, 1);
    border: transparent;
  }
  .top {
    overflow: hidden;
    .head {
      width: calc(100% - 40px);
      margin: 20px auto 0;
      font-size: 16px;
      display: flex;
      justify-content: space-between;
    }
    .pit {
      text-align: center;
      img {
        width: 73px;
        height: 73px;
        margin: 35px auto 10px;
      }
      p {
        font-size: 16px;
        margin: 0 auto 48px;
      }
    }
    .bot {
      width: calc(100% - 40px);
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      font-size: 14px;
      height: 20px;
      margin-bottom: 10px;
      :last-child {
        color: rgba(255, 255, 255, 0.5);
      }
    }
  }
  .main {
    width: calc(100% - 40px);
    margin: 0 auto;
    display: flex;
    align-content: space-between;
    flex-wrap: wrap;
    .ipt {
      width: 100%;
      line-height: 50px;
      font-size: 14px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
  .fot {
    width: calc(100% - 40px);
    margin: 20px auto 30px;
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    :last-child {
      color: rgba(255, 255, 255, 0.5);
    }
  }
  .login {
    width: 335px;
    height: 40px;
    background: linear-gradient(
      150deg,
      rgba(242, 91, 134, 1) 0%,
      rgba(241, 172, 94, 1) 100%
    );
    box-shadow: 0px 0px 4px 1px rgba(242, 109, 125, 0.18);
    border-radius: 6px;
    border: none;
  }
}
</style>
